<template>
  <transition name="fade">
    <Preloader v-if="show" />
  </transition>
  <header
    class="header-section brand-1"
    :class="{ 'header-fixed fadeInUp': scrollPosition > 100 }"
  >
    <div class="header-bottom">
      <div class="container">
        <div class="header-wrapper">
          <div class="header-start header-start--style1">
            <div class="logo">
              <nuxt-link to="/" style="font-size: 1.8rem;color: #ffffff;">
                <!-- <img src="/images/logo/logo.png" alt="logo" /> -->
                StudioPrism
              </nuxt-link>
            </div>
            <div class="menu-area">
              <ul class="menu menu--style1" :class="{ active: menuActive }">
                <li>
                  <!--                   <nuxt-link to="javascript:void(0);">首页 </nuxt-link>
 -->
                  <nuxt-link to="/">首页</nuxt-link>
                  <!--    <ul class="submenu">
                    <li>
                    </li>
                   <li>
                      <nuxt-link to="/index2">Home 2</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/index3">Home 3</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/index4">Home 4</nuxt-link>
                    </li>
                  </ul> -->
                </li>

                <li>
                  <nuxt-link to="javascript:void(0);">资源</nuxt-link>
                  <ul class="submenu">
                    <li>
                      <nuxt-link to="/courses">免费资产</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/course-details"
                        >Demo分享</nuxt-link
                      >
                    </li>
              <!--       <li>
                      <nuxt-link to="/course-category"
                        >Courses Category</nuxt-link
                      >
                    </li>
                    <li>
                      <nuxt-link to="/mentors">Mentors</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/mentor-details">Mentor Details</nuxt-link>
                    </li> -->
                  </ul>
                </li>
                <li>
                  <nuxt-link to="javascript:void(0);">课程</nuxt-link>
                  <ul class="submenu">
                    <li>
                      <nuxt-link to="/blogs">作品展示</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/blogs2">课程详情</nuxt-link>
                    </li>
                    <!-- <li>
                      <nuxt-link to="/blog-details">Blog Details</nuxt-link>
                    </li> -->
                  </ul>
                </li>
                <li>
                  <nuxt-link to="javascript:void(0);">其他</nuxt-link>
                  <ul class="submenu">
                    <li>
                      <nuxt-link to="/about">Steam发布计划</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/gallery">组队社区</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/cart">赛事</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/checkout">联系我们</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/signup">登录</nuxt-link>
                    </li>
                    <!-- <li>
                      <nuxt-link to="/signin">Sign In</nuxt-link>
                    </li>
                    <li>
                      <nuxt-link to="/forgot-password"
                        >Reset Password</nuxt-link
                      >
                    </li>
                    <li>
                      <nuxt-link to="/about">404 Error</nuxt-link>
                    </li> -->
                  </ul>
                </li>
                <!-- <li>
                  <nuxt-link to="/contact">Contact Us</nuxt-link>
                </li> -->
              </ul>
            </div>
          </div>
          <div class="header-end">
            <div class="menu-area">
              <div class="header-btn">
                <nuxt-link
                  to="/signup"
                  class="trk-btn trk-btn--rounded trk-btn--primary1"
                >
                  <span>登录</span>
                </nuxt-link>
              </div>
              <div @click="exit" style="margin-left: 10px;" class="trk-btn trk-btn--rounded trk-btn--primary2">退出</div>
              <!-- toggle icons -->
              <div
                class="header-bar d-xl-none"
                :class="{ active: menuActive }"
                @click="toggleMenu()"
              >
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import Preloader from "@/components/partials/preloaders/Preloader.vue";
export default {
  name: "Header",
  components: { Preloader },
  data() {
    return {
      scrollPosition: 0,
      show: true,
      menuActive: false,
    };
  },

  watch: {
    $route() {
      this.show = false;
      this.closeMenu();
    },
  },

  created() {
    setTimeout(() => {
      this.show = false;
    }, 200);

    if (process.client) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.handleScroll);
    }
  },
  mounted() {
    this.initializeMenu();
  },
  methods: {
    handleScroll() {
      if (process.client) {
        this.scrollPosition = window.scrollY;
      }
    },

    toggleMenu() {
      this.menuActive = !this.menuActive;
      document
        .querySelectorAll(".menu li.menu-item-has-children")
        .forEach(function (item) {
          item.classList.remove("open");
          item.querySelector(".submenu").style.display = "none";
        });
    },
    closeMenu() {
      this.menuActive = false;
      document
        .querySelectorAll(".menu li.menu-item-has-children")
        .forEach(function (item) {
          item.classList.remove("open");
          item.querySelector(".submenu").style.display = "none";
        });
    },

    initializeMenu() {
      var submenuList = document.querySelectorAll("ul>li>.submenu");
      submenuList.forEach(function (submenu) {
        var parentLi = submenu.parentElement;
        if (parentLi) {
          parentLi.classList.add("menu-item-has-children");
        }
      });

      // Toggle menu on click

      if (parseInt(window.innerWidth) < 1200) {
        var menuList = document.querySelectorAll(
          ".menu>li.menu-item-has-children>a"
        );

        menuList.forEach(function (link) {
          link.addEventListener("click", function (e) {
            e.stopPropagation();
            var element = link.parentElement;

            var links = document.querySelectorAll(
              ".menu>.menu-item-has-children"
            );

            links.forEach(function (item, index) {
              if (element != item) {
                item.classList.remove("open");
                item.querySelector(".submenu").style.display = "none";
              } else {
                if (item.classList.contains("open")) {
                  item.querySelector(".submenu").style.display = "none";
                } else {
                  item.querySelector(".submenu").style.display = "block";
                }
                item.classList.toggle("open");
              }
            });
          });
        });
      } else {
        // Fix dropdown menu overflow problem
        var menuList = document.querySelectorAll(
          ".menu>li.menu-item-has-children>a"
        );
        menuList.forEach(function (submenu) {
          var parentLi = submenu.parentElement;
          if (parentLi) {
            parentLi.addEventListener("mouseover", function () {
              var links = document.querySelectorAll(
                ".menu>.menu-item-has-children"
              );

              links.forEach(function (item, index) {
                if (item != submenu) {
                  item.classList.remove("open");
                  item.querySelector(".submenu").style.display = "block";
                } else {
                  item.classList.toggle("open");
                  item.querySelector(".submenu").style.display = "none";
                }
              });

              var menuPos = submenu?.getBoundingClientRect();
              if (menuPos.left + submenu.offsetWidth > window.innerWidth) {
                submenu.style.left = -submenu.offsetWidth + "px";
              }
            });
          }
        });
      }
    },
    scrollingTop() {
      window.scrollTo(0, 0);
    },
    exit(){
      localStorage.removeItem('token');
      this.$router.push('/signin')
    }
  },
};
</script>
